<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表的样式修饰</title>
    <style>
        ul.circle {
            list-style-type: circle;
        }

        ul.square {
            list-style-type: square;
        }

        ol.upper-roman {
            list-style-type: upper-roman;
        }

        ol.lower-alpha {
            list-style-type: lower-alpha;
        }
        ul.exm li{
            list-style-image : url(xxx.gif)
        }
    </style>
</head>

<body>
    <h1>list-style-type属性(<a href="http://www.w3school.com.cn/cssref/pr_list-style-type.asp">属性参考</a>)</h1>
    <hr />
    <h2>实心圆形(默认样式)</h2>
    <ul>
        <li>虐杀原形</li>
        <li>生化危机</li>
        <li>逃生</li>
    </ul>
    <hr />
    <h2>空心圆形</h2>
    <ul class="circle">
        <li>虐杀原形</li>
        <li>生化危机</li>
        <li>逃生</li>
    </ul>
    <hr />
    <h2>罗马字母</h2>
    <ol class="upper-roman">
        <li>虐杀原形</li>
        <li>生化危机</li>
        <li>逃生</li>
    </ol>
    <hr />
    <h2>小写字母</h2>
    <ol class="lower-alpha">
        <li>虐杀原形</li>
        <li>生化危机</li>
        <li>逃生</li>
    </ol>
    <h1>list-style-image属性(<a href="http://www.w3school.com.cn/cssref/pr_list-style-image.asp">属性参考</a>)</h1>
    <hr />
    <h2>图片样式</h2>
    <ul>
        <li>虐杀原形</li>
        <li>生化危机</li>
        <li>逃生</li>
    </ul>
    
</body>

</html>